<div id="blip_settings">
    <div class="inline-drawer">
        <div class="inline-drawer-toggle inline-drawer-header">
            <b>Blip</b>
            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
        </div>
        <div class="inline-drawer-content">
            <div>
                <label class="checkbox_label" for="blip_enabled">
                    <input type="checkbox" id="blip_enabled" name="blip_enabled">
                    <small>Enabled</small>
                </label>
                <label class="checkbox_label" for="blip_enable_user">
                    <input type="checkbox" id="blip_enable_user">
                    <small>Blip user messages</small>
                </label>
                <label class="checkbox_label" for="blip_only_quoted">
                    <input type="checkbox" id="blip_only_quoted">
                    <small>Only blip for "quotes"</small>
                </label>
                <label class="checkbox_label" for="blip_ignore_asterisks">
                    <input type="checkbox" id="blip_ignore_asterisks">
                    <small>Ignore *text, even "quotes", inside asterisks*</small>
                </label>
                <label class="checkbox_label" for="blip_auto_scroll_to_animation">
                    <input type="checkbox" id="blip_auto_scroll_to_animation">
                    <small>Automatically scroll chat down to follow current text animation.</small>
                </label>
                <div class="blip-mixer-div">
                    <div class="blip-mixer-element blip-mixer-mute">
                        <label for="blip_audio_mute" class="audio-label">Mute</label>
                        <div id="blip_audio_mute" class="menu_button audio-mute-button">
                            <i class="fa-solid fa-volume-high fa-lg" id="blip_audio_mute_icon"></i>
                        </div>
                    </div>
                    <div class="blip-mixer-element blip-mixer-volume">
                        <label for="blip_audio_volume_slider" class="audio-label">Vol <span id="blip_audio_volume"></span></label>
                        <input type="range" class ="audio-slider" id ="blip_audio_volume_slider" value ="0" maxlength ="100">
                    </div>
                </div>
            </div>  
            <h4 class="center">Characters Voice Mapping</h4>
            <div>
                <label>Voice Map (debug infos)</label>
                <textarea readonly id="blip_voice_map" type="text" class="text_pole textarea_compact" rows="4"
                    placeholder="Voice map will appear here for debug purpose"></textarea>
                <small>
                    Tips: Use 'default' entry to set a fallback profile.
                    Click refresh to update the character list.
                </small>
            </div>
            <div>
                <div class="blip-parameter">
                    <div class="blip-parameter-title">
                        <label for="blip_character_select">Character:</label>
                    </div>
                    <div>
                        <div class="blip-character-select-div">
                            <div id="blip_character_refresh_button" class="menu_button">
                                <i class="fa-solid fa-refresh"></i>
                                <!-- Refresh -->
                            </div>
                            <select id="blip_character_select">
                                <!-- Populated by JS -->
                            </select>
                            <!--
                            <div class="blip_buttons">
                                <input id="blip_apply" class="menu_button" type="submit" value="Apply" />
                            </div>
                            -->
                            <div id="blip_delete" class="menu_button">
                                Remove
                            </div>
                        </div>
                        <div>
                            <label class="checkbox_label" for="blip_show_all_characters">
                                <input type="checkbox" id="blip_show_all_characters" name="blip_show_all_characters">
                                <small>Show all characters.</small>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="blip-parameter">
                    <div class="blip-parameter-title">
                        <label for="blip_preset_select">Preset:</label>
                    </div>
                    <div>
                        <div class="blip-character-select-div">
                            <select id="blip_preset_select">
                                <!-- Populated by JS -->
                            </select>
                        </div>
                        <div>
                            <small>Set all settings value to the selected preset.</small>
                        </div>
                    </div>
                </div>
                <div>
                    <h4>Animation Settings</h4>
                </div>
                <div class="blip-parameter">
                    <div class="blip-parameter-title">
                        <label for="blip_text_speed">
                            Text speed <br/>(<span id="blip_text_speed_value"></span> ms)
                        </label>
                    </div>
                    <div class="blip-slider-div">
                        <input id="blip_text_speed" type="range" min="0" max="100" step="5" value="10" />
                        <small>
                            Delay between each character is printed.
                        </small>
                    </div>
                </div>
                <div class="blip-parameter">
                    <div class="blip-parameter-title">
                        <label for="blip_min_speed_multiplier">
                            Min speed multiplier <br/>(<span id="blip_min_speed_multiplier_value"></span>x)
                        </label>
                    </div>
                    <div class="blip-slider-div">
                        <input id="blip_min_speed_multiplier" type="range" min="0.5" max="1" step="0.1" value="1" />
                        <small>
                            Minimal multiplier that can be apply to text/audio speed (1 is no change).
                        </small>
                    </div>
                </div>
                <div class="blip-parameter">
                    <div class="blip-parameter-title">
                        <label for="blip_max_speed_multiplier">
                            Max speed multiplier <br/>(<span id="blip_max_speed_multiplier_value"></span>x)
                        </label>
                    </div>
                    <div class="blip-slider-div">
                        <input id="blip_max_speed_multiplier" type="range" min="1" max="1.5" step="0.1" value="1" />
                        <small>
                            Maximal multiplier that can be apply to text/audio speed (1 is no change).
                        </small>
                    </div>
                </div>
                <div class="blip-parameter">
                    <div class="blip-parameter-title">
                        <label for="blip_comma_delay">
                            Comma delay <br/>(<span id="blip_comma_delay_value"></span> ms)
                        </label>
                    </div>
                    <div class="blip-slider-div">
                        <input id="blip_comma_delay" type="range" min="0" max="1000" step="10" value="0" />
                        <small>
                            Delay to wait after printing "," or ";" (pause blip sound).
                        </small>
                    </div>
                </div>
                <div class="blip-parameter">
                    <div class="blip-parameter-title">
                        <label for="blip_phrase_delay">
                            Phrase delay <br/>(<span id="blip_phrase_delay_value"></span> ms)
                        </label>
                    </div>
                    <div class="blip-slider-div">
                        <input id="blip_phrase_delay" type="range" min="0" max="1000" step="10" value="0" />
                        <small>
                            Delay to wait after printing "!" or "?" or "." (pause blip sound).
                        </small>
                    </div>
                </div>
                <div>
                    <h4 class="blip-parameter-section">Audio Settings</h4>
                </div>
                <div class="blip-parameter">
                    <div class="blip-parameter-title">
                        <label for="blip_audio_volume_multiplier">
                            Volume multiplier <br/>(<span id="blip_audio_volume_multiplier_value"></span>%)
                        </label>
                    </div>
                    <div class="blip-slider-div">
                        <input id="blip_audio_volume_multiplier" type="range" min="0" max="100" step="1" value="100" />
                        <small>
                            Percent multiplier to global volume.
                        </small>
                    </div>
                </div>
                <div class="blip-parameter">
                    <div class="blip-parameter-title">
                        <label for="blip_audio_speed">
                            Audio speed <br/>(<span id="blip_audio_speed_value"></span> ms)
                        </label>
                    </div>
                    <div class="blip-slider-div">
                        <input id="blip_audio_speed" type="range" min="0" max="1000" step="10" value="10" />
                        <small>
                            Delay between each blip play.
                        </small>
                    </div>
                </div>
                <div class="blip-parameter">
                    <div class="blip-parameter-title">
                        <label for="blip_audio_origin">
                            Blip sound origin
                        </label>
                    </div>
                    <div class="blip-slider-div">
                        <select id="blip_audio_origin">
                            <option value="generated">generated</option>
                            <option value="file">file</option>
                        </select>
                        <small>
                            Tips: blip file are in assets/blip/ folder.
                        </small>
                    </div>
                </div>
                <div id="blip_file_settings">
                    <div class="blip-parameter">
                        <div class="blip-parameter-title">
                            <label for="blip_file_asset_select">
                                Audio File Asset
                            </label>
                        </div>
                        <div class="blip-slider-div">
                            <div class="blip-file-asset-div">
                                <div id="blip_file_asset_refresh_button" class="menu_button">
                                    <i class="fa-solid fa-refresh"></i>
                                    <!-- Refresh -->
                                </div>
                                <select id="blip_file_asset_select">
                                    <option value="none">Select file</option>
                                    <!-- Populated by JS -->
                                </select>
                            </div>
                            <div>
                                <label class="checkbox_label" for="blip_audio_play_full">
                                    <input type="checkbox" id="blip_audio_play_full" name="blip_audio_wait">
                                    <small>Wait end of audio to play again.</small>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div id="blip_file_settings" class="blip-parameter">
                        <div class="blip-parameter-title">
                            <label for="blip_audio_min_pitch">
                                Min. pitch <br/>(<span id="blip_audio_min_pitch_value"></span>)
                            </label>
                        </div>
                        <div class="blip-slider-div">
                            <input id="blip_audio_min_pitch" type="range" min="0.1" max="5" step="0.1" value="1" />
                            <small>
                                Lower/increase sound rate for pitch change.
                            </small>
                        </div>
                    </div>
                    <div id="blip_file_settings" class="blip-parameter">
                        <div class="blip-parameter-title">
                            <label for="blip_audio_max_pitch">
                                Max. pitch <br/>(<span id="blip_audio_max_pitch_value"></span>)
                            </label>
                        </div>
                        <div class="blip-slider-div">
                            <input id="blip_audio_max_pitch" type="range" min="0.1" max="5" step="0.1" value="1" />
                            <small>
                                Lower/increase sound rate for pitch change.
                            </small>
                        </div>
                    </div>
                </div>
                <div id="blip_generated_settings">
                    <div class="blip-parameter">
                        <div class="blip-parameter-title">
                            <label for="blip_generated_min_frequency">
                                Min. Frequency <br/>(<span id="blip_generated_min_frequency_value"></span>)
                            </label>
                        </div>
                        <div class="blip-slider-div">
                            <input id="blip_generated_min_frequency" type="range" min="17" max="7000" step="1" value="440" />
                            <small>
                                Tips: 440 Hz is a standard middle-A note.
                            </small>
                        </div>
                    </div>
                    <div class="blip-parameter">
                        <div class="blip-parameter-title">
                            <label for="blip_generated_max_frequency">
                                Max. Frequency <br/>(<span id="blip_generated_max_frequency_value"></span>)
                            </label>
                        </div>
                        <div class="blip-slider-div">
                            <input id="blip_generated_max_frequency" type="range" min="17" max="7000" step="1" value="440" />
                            <small>
                                Tips: 440 Hz is a standard middle-A note.
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>